<template>
  <view class="page">
    <!-- 标题栏  start-->
	<view class="cu-custom" :style="[{ height: CustomBar + 'px' }]">
		<view class="fixed bg-white solid-bottom flex align-center justify-between padding-lr-32"
			:style="{height: CustomBar+'px',paddingTop: StatusBar+'px'}">
			<view class="action" @tap="back">
				<text class="cuIcon-back font-36"></text>
			</view>
			<view class="content" :style="[{top:StatusBar+'px'}]">
				<view class="flex align-center justify-center">
					<text class="margin-right-10 font-36 text-333 text-bold">积分明细</text>
					<image :src="imgBaseUrl + '027.png'" class="width-33 height-32" @click="showCalendar" />
				</view>
			</view>
			<view style="width: 36rpx;"></view>
		</view>
	</view>
    <!-- 标题栏  end -->
    <scroll-view scroll-x class="bg-white nav solid-top">
      <view class="flex text-center">
        <view  v-for="(item, index) in navList" :key="index" class="cu-item flex-sub" :class="{ cur: tabCurrentIndex === index }"   @click="tabClick(index)" >
          {{ item.text || '' }}
          <view class="active-line"></view>
        </view>
      </view>
    </scroll-view>
    <view class="margin-top-lg">
      <!-- 页面加载 start -->
      <fu-loading v-if="isShowLoading"></fu-loading>
    </view>
    <!-- 导航栏 end -->
    <!-- 订单列表 start -->
    <view class="list" v-if="!isShowLoading">
      <block v-for="(item, index) in lists" :key="index">
        <view class="order-item">
          <view class="i-top justify-between">
             <view class="content">
               <view class="text-cut ">
                 <text class="content_left ">{{item.remark}}</text>
                </view>
               <view class="text-gray content_bottom text-cut-1" >{{item.create_time}}</view>
             </view>
			 <view class="fu-fs32">
				 <text v-if="item.after_score- item.before_score >0 " class="content_right text-bold  inter-color">+{{item.change_score}}</text>
				 <text v-else class="content_right text-bold "> {{item.change_score}}</text>
			 </view>
          </view>
        </view>
      </block>
    </view>
    <!-- 订单列表 end -->
	<!-- 日历弹框 start -->
	<fu-popup v-model="isShow" mode="center" :mask-close-able="true" @close="closePopup">
	  <view class="bg-white radius-16 width-640 padding-lr-sm">
	    <fu-calendar @change="change" active-bg-color="#FF6F27" range-bg-color="#FFE1D3" :future="true" start-text="" end-text="" mode="range" :isDefaultDay="false" :start-time="startTime" :end-time="endTime"></fu-calendar>
	  </view>
	</fu-popup>
	<!-- 日历弹框 end -->
    <!-- 空布局 start -->
    <fu-empty-ui v-if="lists.length == 0 && isInit"></fu-empty-ui>
    <!-- 空布局 end -->

    <!-- 页面加载 end -->
    <!-- 底部数据加载状态  start-->
    <uni-load-more v-if="lists.length > 5" :status="status"></uni-load-more>
    <!-- 底部数据加载状态  end-->
    <!-- 网络监测 start -->
    <fu-notwork></fu-notwork>
    <!-- 网络监测 end -->
  </view>
</template>

<script>
  // 定义顶部导航
  const tabs = [{
      state: 0,
      text: global.i18n["全部"],
      type: 0,
    },
    {
      state: 2,
      text: global.i18n["收入记录"],
      type: 1,
    },
    {
      state: 3,
      text: global.i18n["支出记录"],
      type: 2,
    }
  ];
  import calendar from '@/common/mixin/calendar.js';
  export default {
     mixins: [calendar],
    data() {
      return {
        isShowLoading: false, //是否显示页面初始化加载loading
        tabCurrentIndex: 0, //顶部导航 选择的第几个
        navList: Object.freeze(tabs), //冻结顶部导航
        lists: [], //订单列表
        page: 1, //页码说
        size: 10, //一页显示几条数据
        status: "more", //  加载状态  more:有更多数据  noMore:已加载全部数据  loading:数据加载中
        isInit: false, //是否已经初始化
        type: 0, //请求的订单类别
        isShow:false,//日历弹框
        startTime:'',//记录用户点击日历时的开始时间
        endTime:'',//记录用户点击日历时的结束时间
      };
    },
    /**
     * @description 获取订单列表
     */
    onShow() {
      this.page = 1;
      this.status = "more";
      this.getOrderList(true);
    },

    onReachBottom() {
      this.getOrderList();
    },
    methods: {
    // /**
    //   * @description 选中日期
    //   * @param {Object} item 入参  日历单个对象
    //   */
    //  chooseTime(item){
    //    if(item.isNot){
    //      return;
    //    }

    //     this.isClick++;
    //     let start,end;
    //     if(this.isClick == 1){
    //       start = item.formData;
    //     }else{
    //       end = item.formData;
    //     }
    //     let calendar = this.calendar;
    //      calendar.forEach(val=>{
    //        if(val.formData == item.formData && !val.isNot){
    //          val.active = true;
    //        }
    //      })
    //    if(this.isClick == 2){
    //      this.calendar = calendar;
    //      if(new Date(start).getTime() > new Date(start).getTime(end)){
    //        this.start_time = end;
    //        this.end_time = start;
    //      }else{
    //        this.start_time = start;
    //        this.end_time = end;
    //      }
    //       this.page = 1
    //       this.status = "more";
    //       this.getOrderList();
    //    }
    //  },
	back() {
		uni.navigateBack()
	},
      /**
       * @description  显示日历
       */
      showCalendar(){
        this.isShow=true
      },
      /**
       *  @description 顶部tab点击
       * @param {Object} index 导航栏选择序号
       */
      tabClick(index) {
        // this.start_time = ''//记录用户点击日历时的开始时间
        // this.end_time = '' //记录用户点击日历时的结束时间
        // uni.setStorageSync('start',this.start_time);
        // uni.setStorageSync('end',this.end_time);
        this.tabCurrentIndex = index;
        this.type = this.navList[index].type;
        this.refreshOrderList(true);
      },

      /**
       * @description  获取列表
       * @param {Object} value  用来判断第页码初始化第一次 加载页面loading
       */
      getOrderList(value) {
        if (this.status != "more") return;
        this.status = "loading";
        let data = {
          start_time:this.startTime ,
          end_time:this.endTime,
          type: this.type,
          page: this.page,
          list_rows: this.size,
        };
        console.log('请求的数据', data)
        if (this.page == 1 && value) {
          this.isShowLoading = true
        }
        this.$api
          .post(global.apiUrls.postGetScoreList, data)
          .then((res) => {
            console.log("积分明细", res);
            this.isShowLoading = false
            if (res.data.code == 1) {
              var curPageData = res.data.data.data;
               let total = res.data.data.total;
              if (this.page == 1) this.lists = [];
              this.lists = this.lists.concat(curPageData);
              if (this.lists.length < total) {
                this.status = "more";
                this.page++;
              } else {
                this.status = "noMore";
              }
            } else {
              this.$message.info(res.data.msg);
            }
            this.isInit = true;
            uni.stopPullDownRefresh();

          })
          .catch((err) => {
            this.isShowLoading = false
            uni.stopPullDownRefresh();
          });
      },
      /**
       * @description 关闭日期弹窗 处理日期获取数据
       */
      closePopup(){
         this.isShow = false

      },
	  change(value) {
	    console.log(value)
	    if (value.isInit) return;
	    this.startTime = value.start;
	    this.endTime = value.end;
	    setTimeout(() =>{
	      this.isShow = false;
	    },800)
	    this.refreshOrderList();
	  },

      /**
       * @description  重置列表
       * @param {Object} value 页面是否初始化
       */
      refreshOrderList(value) {
        this.page = 1;
        this.status = "more";
        if (value) {
          this.getOrderList(true);
        } else {
          this.getOrderList();
        }

      },
    },
  };
</script>

<style lang="scss" scoped>
  .page {
    min-height: 100vh;
  }
// 标题栏 start
.nav_title{
  font-size: 36rpx;
  font-weight: 500;
  color: #333333;

  image{
    width:33rpx;
    height:32rpx;
  }
}
.nav {
  position:fixed;
  z-index: 999;
  margin-bottom: 20upx;
}
.nav .cu-item{
  font-size: 32rpx;
  font-weight: 400;
  color: #333333;


  position: relative;
  .active-line{
    position: absolute;
    bottom: 0rpx;
    left: 50%;
    transform: translateX(-50%);
    display: none;
    width: 66rpx;
    height: 4rpx;
    background: $theme;
    opacity: 1;
    border-radius: 6rpx;
  }
}
.nav .cu-item.cur {
  color: #333;
  font-weight: 500;
  border-bottom: 0!important;
  .active-line{
    display: block;
  }
}

.nav .cu-item.cur::after {
  content: '';
  display: none;
}
// 标题栏 end
  .list {
    margin-top:106rpx;
  }
  // 订单列表 start
   .list .order-item:first-child {
     // margin-top:16rpx;
   }
  .order-item {
    display: flex;
    flex-direction: column;
    padding-left: 30upx;
    background: #fff;
    margin: 2upx 0upx 0 0upx;
    // border-radius: 16rpx;

    .content_bottom{
        font-size: 24rpx !important;
        font-family: PingFang SC;
        color: #999999;
    }

    .i-top {
      display: flex;
      align-items: center;
      height: 150upx;
      line-height: 150upx;
      padding-right: 30upx;
      font-size: 28rpx;
      color: #333333;
      position: relative;
      .content{
		  width: 550rpx;
         view{
           height: 50rpx;
           line-height: 50rpx;
         }
         .content_left{
           font-size: 28rpx;
           font-family: PingFang SC;
           font-weight: 500;
           color: #333333;
           padding-right:6rpx;
         }
         .content_right{
            font-size: 32rpx;
            font-family: Oswald;
            font-weight: 400;
            // color: #FA2033;
         }

      }

    }
  }
.inter-color{
  color: #FF6F27;
}
  // 订单列表 end
  // 日历弹框 start
  .calendar-box{
    background: #FFFFFF;
    width: 640rpx;
    height: 560rpx;
    padding:0 24rpx;
    .calendar-wrap {
      .height-76 {
        height: 60rpx;
      }
      .calendar-title-prev {
        padding: 0 24rpx;
        transform: rotate(-180deg);
        box-sizing: border-box;
      }
      .calendar-title-next {
        padding: 0 24rpx;
        box-sizing: border-box;
      }
      .calendar-content{
        transition: all .3s ease;
        overflow: hidden;

      }
      .calendar-item{
        width: calc(100% / 7);
        .calendar-item-num{
          width: 56rpx;
          height: 56rpx;
          line-height: 56rpx;
          &.not{
            color: #BFBFBF;
          }
          &.active{
            background: $bgtheme;
            color: #FFFFFF;
          }
        }
      }
      .calendar-close{
        height: 48rpx;
        position: relative;
        &::after{
          content: '';
          position: absolute;
          top: 50%;
          left: 0;
          width: 100%;
          height: 1rpx;
          background: #EEEEEE;
          transform: scaleY(0.5);

        }
        .calendar-close-btn{
          width: 48rpx;
          height: 48rpx;
          line-height: 48rpx;
          background: $bgtheme;
          position: relative;
          z-index: 1;

        }
      }
    }
  }
  // 日历弹框 end
  .fixed {
  	position: fixed;
  	top: 0;
  	width: 100%;
  }
</style>
